import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

import './App.css';

import Footer from './view/footer/Footer';
import Header from './view/header/Header'
import Main from './view/main/Main';
import Home from './view/index/home';
import List from './view/list/list';
import Detail from './view/detail/detail';

import { KeepAliveProvider, withKeepAlive } from './keepalive/index';
let KeepAliveHome = withKeepAlive(Home, { cacheId: 'Home'});
let KeepAliveList = withKeepAlive(List, { cacheId: 'List',scroll:true});
let KeepAliveDetail = withKeepAlive(Detail, { cacheId: 'Detail' });

const App = () => {
  return (
    <BrowserRouter>
      <KeepAliveProvider>
        <div className="App">
          <header className="App-header">
            <Header/>
            <ul>
              <li><Link to="/">首页</Link></li>
              <li><Link to="/list">用户列表</Link></li>
              <li><Link to="/detail">用户信息</Link></li>
            </ul> 
          </header>
          <main className="App-content">
            <Main/>
            <Switch>
              <Route path="/" component={KeepAliveHome} exact/>
              <Route path="/list" component={KeepAliveList}/>
              <Route path="/detail" component={KeepAliveDetail}/>
            </Switch>
          </main>
          <footer className="App-footer">
            <Footer/>
          </footer>
        </div>
      </KeepAliveProvider>
    </BrowserRouter>
  );
}

export default App;
